@import "../imports/mixins";

.jw-skin-stormtrooper {
    @active-color: #35e5fc;
    @inactive-color: #6d7a8b;
    @hover-color: @active-color;
    @progress-color: @active-color;
    @buffer-color: #000;

    @display-icon-color: @inactive-color;
    @display-icon-hover-color: @progress-color;
    @display-bkgd-color: @rail-color;
    @display-bkgd-hover-color: @display-bkgd-color;

    @rail-color: #2b3036;
    @horiz-rail-gradient: linear-gradient(to bottom, rgba(19,137,175,1) 0%, rgba(54,228,252,1) 50%, rgba(19,137,175,1) 100%);
    @vertical-rail-gradient: linear-gradient(to right, rgba(19,137,175,1) 0%, rgba(54,228,252,1) 50%, rgba(19,137,175,1) 100%);
    @thumb-color: @progress-color;
    @controlbar-background: @rail-color;
    @cc-inactive: @buffer-color;
    @cc-active: @active-color;
    @volume-background: #333;

    @rail-height: .3em;
    @thumb-size: .1em;
    @thumb-width: @thumb-size;
    @thumb-height: .5em;

    @controlbar-height: 2em;

    @nextup-border-radius: 2px;
    @nextup-header-background: fade(@controlbar-background, 90%);
    @nextup-body-background: darken(@nextup-header-background, 20%);
    @nextup-body-text-color-overflow: darken(@controlbar-background, 20%);

    #namespace > .controlbar-height();
    #namespace > .basic-skin-styles(); // Using the above local variables
    #namespace > .touch-flag-skin-styles(); // Using the above local variables
    #namespace > .set-global-color-classes();

    .skin-element-padding();

    &.jw-breakpoint-0 .jw-controlbar {
      height: 2.1em;
    }

    /* For the overlay containers */
    .jw-time-tip,
    .jw-volume-tip,
    .jw-menu,
    .jw-skip {
        border-radius: @ui-padding;
    }

    /* Position of remaining overlay containers */
    .jw-volume-tip,
    .jw-menu {
        bottom: .3em;
    }

    /* Playlist title */
    .jw-tooltip-title {
        border-bottom: 1px solid #5B697A;
        background-color: @rail-color;
    }

    /* Rail/slider styles */
    .jw-rail,
    .jw-buffer,
    .jw-progress,
    .jw-knob {
        box-sizing: border-box;
        border: 1.5px solid #000;
        border-radius: 2px;
    }

    .jw-progress,
    .jw-knob {
        background: @rail-color;
    }

    /* Timeline and horizontal volume slider */
    .jw-slider-horizontal {
        .jw-progress {
            background: @horiz-rail-gradient;
        }

        .jw-knob {
            .vertically-centered-rail-element(.3em,.5em);

            background: @vertical-rail-gradient;
            width: .3em;
            height: .5em;
            border-width: 1px;
            border-radius: 0;
        }

        .jw-cue {
            .vertically-centered-rail-element(.3em,.4em);
            background-color: @inactive-color;
            border: 1px solid #000;
        }
    }

    /* Volume slider */
    .jw-slider-vertical {
        .jw-rail,
        .jw-progress {
            width: @rail-height;
        }

        .jw-progress {
            background: @vertical-rail-gradient;
        }

        .jw-knob {
            width: .5em;
            height: .2em;
            background: @horiz-rail-gradient;
            border-width: 1px;
            .horizontally-centered-rail-element(@rail-height, 0.5em);
        }
    }

    /* Toggle icons */
    .jw-icon-cc {
        &.jw-off:before {
            content: "\e604";
        }
    }

    .jw-icon-hd {
        &.jw-off:before {
            content: "\e609";
        }
    }

}
